<template>
	<view>
		<view class="calendar">
			<u-icon size="40" name="calendar-fill" color="#398ade"></u-icon>
			<view class="data">{{data}}</view>
		</view>
		<view class="btn">
			<view class="text">{{$t('homepage.OutputWage.payslip')}}</view>
			<view class="checkBtn">
				<u-button type="primary" :text="$t('homepage.OutputWage.detail')" @click="checkBtn()"></u-button>
			</view>
		</view>
		<view class="formList">
			<u--form labelPosition="left" labelWidth="80px" :model="formList">
				<u-form-item :label="$t('homepage.OutputWage.dayProductTitle')" prop="todayYield" borderBottom>
					<u--text :text="formList.todayYield" color="#8c8c8c" align="right" margin="0 10px"></u--text>件
				</u-form-item>
				<u-form-item :label="$t('homepage.OutputWage.monthProductTitle')" prop="monthYield" borderBottom>
					<u--text :text="formList.monthYield" color="#8c8c8c" align="right" margin="0 10px"></u--text>件
				</u-form-item>
				<u-form-item :label="$t('homepage.OutputWage.dayWageTitle')" prop="todaySalary" borderBottom>
					<u--text :text="formList.todaySalary" mode="price" align="right" color="#8c8c8c" margin="0 10px">
					</u--text>元
				</u-form-item>
				<u-form-item :label="$t('homepage.OutputWage.monthWageTitle')" prop="monthSalary" borderBottom>
					<u--text :text="formList.monthSalary" mode="price" align="right" color="#8c8c8c" margin="0 10px">
					</u--text>元
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		getTodayYeild
	} from "@/api/homepage.js"
	export default {
		data() {
			return {
				data: '',
				formList: {
					todayYield: '',
					monthYield: '',
					todaySalary: '',
					monthSalary: '',
				}
			}
		},
		onLoad() {
			this.data = this.$u.date()
			this.getdayWage()
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.redirectTo({
					url: "/pages/HomePage/OutputWage/index"
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 明细
			checkBtn() {
				uni.navigateTo({
					url: "./detail"
				})
			},
			// formlist表单数据
			getdayWage() {
				getTodayYeild().then((res) => {
					this.formList.todayYield = res.data.todayYield,
						this.formList.monthYield = res.data.monthYield,
						this.formList.todaySalary = res.data.todaySalary,
						this.formList.monthSalary = res.data.mouthSalary
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.calendar {
		width: 100%;
		height: 80px;
		display: flex;
		background-color: #FFFFFF;
		justify-content: center;
		margin: 10px 0;
	}

	.data {
		font-size: 18px;
		line-height: 80px;
		margin-left: 10px;
	}

	.btn {
		display: flex;
		height: 40px;
		line-height: 40px;


		.text {
			color: #c5c5c5;
			margin-left: 15px;
		}

		.checkBtn {
			position: fixed;
			right: 15px;
		}
	}

	.formList {
		position: absolute;
		background-color: #fff;
		margin: 10px 0 50px 0;
		padding: 0 5%;
		width: 84%;
		left: 3%;
		right: 3%;
		border-radius: 4px;
	}
</style>